<template>
  <div class="project" @click="onClick" v-if="project">
    <div class="section header">
      <div class="content-line-container">
        <div class="icon">
          {{ icon }}
        </div>
        <div class="title">
          {{ project.title }}
        </div>
      </div>
    </div>
    <div class="section note" v-if="!isInbox">
      <div class="content-line-container">
        <span v-if="!project.note">
          备注
        </span>
        <template v-else>
          {{ project.note }}
        </template>
      </div>
    </div>
    <!-- CommonItemList will update apollo directly!!! -->
    <common-item-list
      v-model="dataCommonItems"
      ref="list"
      :animated="animated"
      class="section content"
    />
  </div>
  <div v-else>载入中...</div>
</template>
<script>
import { KeyBinding, KeyCode, KeyMod } from "@winwin/keybinding.js";
import COMMON_ITEM_CREATE from "../graphql/CommonItemCreate.gql";
import DATA_ALL from "../graphql/DataAll.gql";
import CommonItemList from "./CommonItemList";
import Dispatcher from "../utils/dispatcher";
import store from "@/store";
function sortByIndex(a, b) {
  return a.index - b.index;
}
export default {
  name: "Project",
  components: {
    CommonItemList
  },
  apollo: {
    apolloCommonItems: {
      query: DATA_ALL,
      update: data => data.commonItems
    },
    apolloProjects: {
      query: DATA_ALL,
      update: data => data.projects
    }
  },
  data() {
    return {
      store,
      apolloCommonItems: [],
      apolloProjects: [],
      dataCommonItems: [],
      bakCommonItems: [],
      ghostIdx: void 0,
      ghostObj: { __ghost: true },
      selected: [],
      lastSelected: "",
      editing: "",
      draging: false,
      drag: { x: 0, y: 0 }
    };
  },
  watch: {
    ["$route.params.id"]() {
      if (this.store.getters.home_is_view)
        this.store.mutations.home_view_route();
      this.$nextTick(() => {
        if (this.store.getters.home_is_route)
          this.store.mutations.home_route_view();
      });
    },
    commonItems(v) {
      this.dataCommonItems = JSON.parse(JSON.stringify(v));
    }
  },
  computed: {
    animated() {
      return this.store.getters.home_animated;
    },
    id() {
      return this.$route.params.id;
    },
    isInbox() {
      return this.$route.params.id === "inbox";
    },
    project() {
      return this.apolloProjects.filter(p => p.id === this.id)[0];
    },
    icon() {
      return this.project.id !== "unknown"
        ? this.isInbox
          ? "📪"
          : "💿"
        : "❓";
    },
    commonItems() {
      return this.apolloCommonItems
        .filter(i => i.parent === this.project.id)
        .sort(sortByIndex);
    }
  },
  methods: {
    createCommonItem() {
      this.selected = [];
      const title = "";
      this.$apollo
        .mutate({
          mutation: COMMON_ITEM_CREATE,
          variables: {
            parent: this.id,
            title
          },
          update: (store, { data: { addCommonItem } }) => {
            const data = store.readQuery({ query: DATA_ALL });
            data.commonItems = addCommonItem.commonItems;
            data.projects = addCommonItem.projects;
            store.writeQuery({ query: DATA_ALL, data });
          }
        })
        .then(({ data: { addCommonItem } }) => {
          this.$refs.list.setEditing(addCommonItem.commonItem.id);
        })
        .catch(error => {
          console.error(error);
          this.$notify({
            title: "新建失败",
            type: "error"
          });
        });
    },
    onClick() {
      this.$refs.list.clearSelected();
    }
  },
  mounted() {
    Dispatcher.register("commonitem.new", () => {
      this.createCommonItem();
    });
    KeyBinding.register("window", "new", KeyMod.Alt | KeyCode.KEY_N, e => {
      e.preventDefault();
      Dispatcher.dispatch("commonitem.new");
    });
    if (this.store.getters.home_is_route)
      this.store.mutations.home_route_view();
  },
  beforeDestroy() {
    KeyBinding.unregister("window", "new");
    Dispatcher.unregister("commonitem.new");
    if (this.store.getters.home_is_view) this.store.mutations.home_view_route();
  }
};
</script>
<style lang="less">
.project {
  min-height: 100%;
  background-color: #f9f9fa;
  padding-top: 72px;
  padding-bottom: 88px;
  position: relative;
  display: flex;
  flex-direction: column;
  .section.header .content-line-container {
    display: flex;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    font-weight: bold;
    .icon {
      width: 32px;
      margin-right: 4px;
    }
  }
  .section.note {
    margin-top: 4px;
    font-size: 14px;
    span {
      color: #afb3b7;
    }
  }
  .section.content {
    margin-top: 42px;
    overflow: hidden;
    flex: 1;
  }
}
</style>
